<script setup>
import { showImagePreview } from 'vant';
import router from '../../router'; // 引入路由配置
import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
import axios from 'axios'
import { reactive, ref } from "vue";

const commodity = reactive({value:{}});
const { query, params } = useRoute();
console.log(params.id);

axios.get("/api/commodity/select/" + params.id).then(res => {
  console.log(res.data);
  commodity.value = res.data;
})
const image = () => {
    showImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);
}

const onSubmit = () => {
    router.push("/submit/1")
}
</script>

<template>
  <div>
    <van-image
      @click="image"    
      width="100%"
      height="500"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
    <div class="pric">¥ {{commodity.value.pric}}</div>
    <div class="title">{{commodity.value.name}}</div>
    <van-image
      width="100%"
      height="500"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
    <van-image
      width="100%"
      height="500"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
    <van-image
      width="100%"
      height="500"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<style scoped>
.title{
    text-align: left;
    font-size: 29px;
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.pric{
    text-align: left;
    font-size: 24px;
    margin-top: 20px;
    margin-left: 10px;
    color:red;
}
</style>
